import React, { useState, useEffect } from 'react';
import { Routes, Route, Navigate, useNavigate } from 'react-router-dom';
import Navbar from './components/Navbar';
import Home from './pages/Home';
import Popular from './pages/Popular';
import Personal from './pages/Personal';
import Setting from './pages/Setting';
import Login from './pages/Login';
import Register from './pages/Register';  // 注册页面组件
import SearchResults from './pages/SearchResults';
import MyPage from './pages/MyPage';
import TopicDetail from './pages/TopicDetail'
import './style.css';
import PostDetail from './pages/PostDetail';
import { useLocation } from 'react-router-dom';

const App = () => {
    const [isLoggedIn, setIsLoggedIn] = useState(false); // 管理登录状态
    const navigate = useNavigate();
    const location = useLocation();

    useEffect(() => {
        if (isLoggedIn) {
            localStorage.setItem('lastPath', location.pathname); // 存储当前路径
        }
    }, [location, isLoggedIn]);

    // 检查登录状态
    const checkLoginStatus = () => {
        const userId = localStorage.getItem('userId');
        const expirationTime = localStorage.getItem('expirationTime');

        if (userId && expirationTime) {
            if (Date.now() < parseInt(expirationTime)) {
                // 登录状态仍有效
                setIsLoggedIn(true);
                return;
            } else {
                // 登录已过期
                localStorage.removeItem('userId');
                localStorage.removeItem('expirationTime');
            }
        }
        setIsLoggedIn(false);
    };

    useEffect(() => {
        checkLoginStatus(); // 每次页面加载时检查登录状态
    }, []);
 
    const handleLogout = () => {
        setIsLoggedIn(false);
        localStorage.removeItem('userId');
        localStorage.removeItem('expirationTime');
        navigate('/'); // 跳转到登录页面
    };

    // 登录成功时更新登录状态
    const handleLogin = () => {
        setIsLoggedIn(true); // 设置登录状态为 true
    };

    return (
        <div className="app">
            {/* 如果用户已登录，显示导航栏 */}
            {isLoggedIn && <Navbar onLogout={handleLogout} />}

            <div className="content">
                <Routes>
                    {/* 如果未登录，重定向到登录页面 */}
                    <Route
                        path="/"
                        element={
                            isLoggedIn
                                ? <Navigate to={localStorage.getItem('lastPath') || `/home/${localStorage.getItem('userId')}`} />
                                : <Login onLogin={handleLogin} />
                        }
                    />
                    {/* <Route path="/" element={isLoggedIn ? <Navigate to="/home/" /> : <Login onLogin={handleLogin} />} /> */}
                    <Route path="/home/:userId" element={isLoggedIn ? <Home /> : <Navigate to="/" />} />
                    <Route path="/popular" element={isLoggedIn ? <Popular /> : <Navigate to="/" />} />
                    <Route path="/personal/:userId" element={isLoggedIn ? <Personal /> : <Navigate to="/" />} />
                    <Route path="/settings" element={isLoggedIn ? <Setting /> : <Navigate to="/" />} />
                    <Route path="/register" element={<Register onLogin={handleLogin} />} />
                    <Route path="/search" element={isLoggedIn ? <SearchResults /> : <Navigate to="/" />} />
                    <Route path="/mypage/:category/:userId" element={isLoggedIn ? <MyPage /> : <Navigate to="/" />} />
                    <Route path="/topic/:interestId" element={isLoggedIn ? <TopicDetail /> : <Navigate to="/" />} />
                    <Route path="/post/:blogId" element={isLoggedIn ? <PostDetail /> : <Navigate to="/" />} />
                </Routes>
            </div>
        </div>
    );
};

export default App;
